<template>
    <div class="container">
        <ul class="mui-table-view">
            <li v-for="item in newsListData" :key="item.id" class="mui-table-view-cell mui-media">
                <router-link :to="'/home/newsinfo/'+item.id">
                    <img class="mui-media-object mui-pull-left" :src="item.img_url">
                    <div class="mui-media-body">
                        <h4 class="mui-ellipsis">{{item.title}}</h4>
                        <p class='mui-ellipsis'>
                            <span>发表时间: {{item.add_time |dateFormat}}</span>
                            <span class="fl-right">点击: {{item.click}} 次</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    import connector from '../../base/interface.js';
    import { Toast } from 'mint-ui';
    export default {
        data(){
            return{
                newsListData:[]
            }
        }, methods:{
            getnewsList(){
                /*获取新闻列表数据*/
                connector.getNewsList().then(result=>{
                    this.newsListData=result;
                },err=>{
                    Toast('新闻列表数据获取失败');
                })
            }
        },created() {
            this.getnewsList();
        }
    }
</script>

<style lang="scss" scoped>

@import "../../base/baseRem.scss";

.mui-table-view{
    .mui-ellipsis span{
        color:#226aff ;
    }
}
</style>